<style>
.layui-table-body {
    overflow-x: hidden;
}
</style>
<div class="layui-tab layui-tab-brief" lay-filter="tabDemo">  
    <ul class="layui-tab-title" onclick="reloadRecycleList()">  
        <li class="layui-this">接口</li>  
        <li>快捷请求</li>  
    </ul>  
    <div class="layui-tab-content">  
        <div class="layui-tab-item layui-show">  
             <div id="apiTable-toolbar-setRowChecked" class="layui-btn-container">
                  已选 <span id="apiCheckedNum" style="padding:5px;">1</span>项<a style="padding-left:25px;color:#1e9fff"lay-on="cancelCheckData">取消选择</a>
				<a style="float:right;" class="layui-btn layui-btn-xs getCheckData" lay-on="getCheckData">恢复</a>
             </div>
            <table class="layui-table layui-hide" id="apiTable" lay-skin="line"></table>       
        </div>  
        <div class="layui-tab-item">  
              <div id="shortcutTable-toolbar-setRowChecked" class="layui-btn-container">
                   已选 <span id="shortcutCheckedNum" style="padding:5px;">1</span>项<a style="padding-left:25px;color:#1e9fff"lay-on="cancelCheckDataShortcutTable">取消选择</a>
					<a style="float:right;" class="layui-btn layui-btn-xs getCheckData" lay-on="getCheckDataShortcutTable">恢复</a>
              </div>
            <table class="layui-table layui-hide" id="shortcutTable" lay-skin="line"></table>  
        </div>  
    </div>  
</div>
<script>  


    var tipsIndex=0;

    // 渲染API表格  
    function reloadTable(data,type) {  
        if(type=='1')
    	    layui.table.reload('apiTable', {data:apiData}, false);
	    if(type=='2')
    		layui.table.reload('shortcutTable', {data:shortcutData}, false);
    }  

    

   // 恢复
   function recover(id,type) {
	   $.ajax({
			 url:'#(path)#(apiActionKey)/recover',
		 	 type:"POST",
		 	 data:{id:id},
		 	 success:function(ret) {
			 	if (ret.state=='ok') { 
			 		reloadRecycleList();
			 		getApiTreeList(type);
			 	}
			 	showMsg(ret.msg);	
		 	}
		 });  
	   layer.close(tipsIndex);	
  }

   // 刷新数据
   function reloadRecycleList(){
		$.ajax({
			 url:'#(path)#(apiActionKey)/getRecycleList',
		 	 type:"POST",
		 	 success:function(ret){
		 		apiData = ret.data.api_data;  
		 	    shortcutData = ret.data.shortcut_data;  
		 	    reloadTable(apiData,'1');
		 	    reloadTable(shortcutData,'2');
		 	 }
		});
	}


   renderTable('apiTable',apiData,'api');
   renderTable('shortcutTable',shortcutData,'shortcut');

   function renderTable(id,data,tableType){
	   layui.table.render({
	     elem: '#'+id,
	     cols: [[ //标题栏
	       {field: 'id', title: 'ID', width: 50, checkbox: true},
	       {field: 'title', title: '文件名',templet:function(obj){
				return `${obj.type=='menu'? `<i class="layui-icon layui-icon-export"></i>`
                        :obj.type=='demo'?'<i class="layui-icon layui-icon-log"></i>'
                                :obj.type == 'link'?'<i class="layui-icon layui-icon-senior" style="color:#409EFF"></i>'
                                        :`<span class="${obj.request_mode||'GET'}">${obj.request_mode||'GET'}</span>`}
          		 		${obj.title||obj.action_key||''}<span class="td-title" title="所属目录：${obj.parent_names||''}">${obj.parent_names||''}</span>
          		 		`;
		     }},
	       //{field: 'update_by', title: '操作人', width: 100,align:'center'},
	       {field: 'diff_days', title: '剩余时间', width: 120,sort:true,align:'center'},
	       {title: '操作', width:120,align:'center', templet: function(obj){
				return `<a lay-on="${tableType}-tips-left${obj.status==1?'1':''}" class="${obj.status==1 ? 'td-a' : 0}"
						style="color: ${obj.status==1?'#7f7676':'#16baaa'};cursor: ${obj.status==1 ? 'not-allowed':'pointer'};"
				 		data-id="${obj.status==1?'':obj.id}">恢复</a>`;
		   }}
	     ]],
	     data: data,
	     defaultToolbar:false,
	     skin: 'line', // 表格风格
	     page: false, // 是否显示分页
	     done:function(){
	    	 $('.layui-btn-container').hide();
		 }
	 });
  }


   // 恢复
   layui.util.on('lay-on', {
   	'api-tips-left': function(){
   		if(tipsIndex==0){
   		var dataId=$(this).attr('data-id');
        var content=`<span><i style="color: #f39b12;padding-right:10px;" 
            	class="layui-layer-face layui-icon layui-icon-tips"></i>确定恢复该文件？</span>
	           	<div style="float:right;padding-left:10px;">
	           	<button class="layui-btn layui-btn-xs layui-border-blue" onclick="layer.close(tipsIndex)"><font color="white">取消</font></button>
	           	<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="recover('${dataId}','1')">确定</button><div>`;
        tipsIndex=layer.tips(content, this, {
	    	tips: [4, '#16baaa'],
	    	time:5000,
	    	end: function(){
	    		tipsIndex=0;
	    	  }
	      });
   	   	}
   	 },
   	 'shortcut-tips-left': function(){
   	  	 if(tipsIndex==0){	   	   	   	 
   	   	 	var dataId=$(this).attr("data-id");
	        var content=`<span><i style="color: #f39b12;padding-right:10px;" class="layui-layer-face layui-icon layui-icon-tips"></i>确定恢复该文件？</span>
	            	<div style="float:right;padding-left:10px;"><button class="layui-btn layui-btn-xs layui-border-blue" 
	                	onclick="layer.close(tipsIndex)"><font color="white">取消</font></button>
	            	<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="recover('${dataId}','2')">确定</button><div>`;
	         tipsIndex = layer.tips(content, this, {
	   	    	tips: [4, '#16baaa'],
	   	    	time:5000,
	   	    	end: function(){
	   	    		tipsIndex=0;
	   	    	  }
	   	      });
	   	  }
      },
      'getCheckData':function(){
    	  var checkStatus = layui.table.checkStatus('apiTable'); //获取选中行状态
    	  var selectedData = checkStatus.data;  // 获取选中行数据
          var selectedIds = selectedData.map(function(item) {  
              return item.id;  
          });  
          // 将 IDs 转换为字符串  
          var selectedIdsString = selectedIds.join(',');  
          if(tipsIndex==0){	   	   	   	 
      	   	var dataId=$(this).attr("data-id");
   	        var content=`<span><i style="color: #f39b12;padding-right:10px;" class="layui-layer-face layui-icon layui-icon-tips"></i>确定恢复已选择的 ${selectedData.length} 个文件？</span>
   	            	<div style="padding-left:90px;"><button class="layui-btn layui-btn-xs layui-border-blue" 
   	                	onclick="layer.close(tipsIndex)"><font color="white">取消</font></button>
   	            	<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="recover('${selectedIdsString}','-2')">确定</button><div>`;
   	         tipsIndex = layer.tips(content, this, {
   	   	    	tips: [4, '#16baaa'],
   	   	    	time:5000,
   	   	    	end: function(){
   	   	    		tipsIndex=0;
   	   	    	  }
   	   	      });
   	   	  }
      },
      'cancelCheckData':function(){
    	  var checkStatus = layui.table.checkStatus('apiTable'); //获取选中行状态
    	  var selectedData = checkStatus.data;  // 获取选中行数据
   	   // 取消选中  
          if (selectedData.length > 0) {  
       	   // 重新渲染表格，清空选中状态  
              reloadRecycleList()
          }
      },
      'getCheckDataShortcutTable':function(){
    	  var checkStatus = layui.table.checkStatus('shortcutTable'); //获取选中行状态
    	  var selectedData = checkStatus.data;  // 获取选中行数据
          var selectedIds = selectedData.map(function(item) {  
              return item.id;  
          });  
          // 将 IDs 转换为字符串  
          var selectedIdsString = selectedIds.join(',');  
          if(tipsIndex==0){	   	   	   	 
      	   	var dataId=$(this).attr("data-id");
   	        var content=`<span><i style="color: #f39b12;padding-right:10px;" class="layui-layer-face layui-icon layui-icon-tips"></i>确定恢复已选择的 ${selectedData.length} 个文件？</span>
   	            	<div style="padding-left:90px;"><button class="layui-btn layui-btn-xs layui-border-blue" 
   	                	onclick="layer.close(tipsIndex)"><font color="white">取消</font></button>
   	            	<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="recover('${selectedIdsString}','2')">确定</button><div>`;
   	         tipsIndex = layer.tips(content, this, {
   	   	    	tips: [4, '#16baaa'],
   	   	    	time:5000,
   	   	    	end: function(){
   	   	    		tipsIndex=0;
   	   	    	  }
   	   	      });
   	   	  }
      },
      'cancelCheckDataShortcutTable':function(){
    	  var checkStatus = layui.table.checkStatus('shortcutTable'); //获取选中行状态
    	  var selectedData = checkStatus.data;  // 获取选中行数据
   	   // 取消选中  
          if (selectedData.length > 0) {  
       	   // 重新渲染表格，清空选中状态  
              reloadRecycleList()
          }
      }
   });
   
   $('.td-a').hover(function(){
       var title='所属接口文档已不存在';
       var dataId=$(this).attr('data-id');
       if(!dataId && tipsIndex==0){
	       tipsIndex=layer.tips(title, this,{
	           tips:[4,'#16baaa'],
	           end: function(){
  	    			tipsIndex=0;
  	    	  	}
	       });
       }
   },function(){
       layer.close(tipsIndex);
   });

   // 监听工具条的选中事件  
   layui.table.on('checkbox(apiTable)', function(obj){
       var checkData = layui.table.checkStatus('apiTable').data; //获取选中行状态
       if (checkData.length > 0) {  
    	   $('#apiTable-toolbar-setRowChecked').show(); // 显示当前表格的工具条  
       } else {  
    	   $('#apiTable-toolbar-setRowChecked').hide(); // 隐藏当前表格的工具条  
       }  
       $('#apiCheckedNum').html(checkData.length);
   });  
   // 监听工具条的选中事件  
   layui.table.on('checkbox(shortcutTable)', function(obj){
       var checkData = layui.table.checkStatus('shortcutTable').data; //获取选中行状态
       if (checkData.length > 0) {  
    	   $('#apiTable-toolbar-setRowChecked').show(); // 显示当前表格的工具条  
       } else {  
    	   $('#apiTable-toolbar-setRowChecked').hide(); // 隐藏当前表格的工具条  
       }  
       $('#shortcutCheckedNum').html(checkData.length);
   });  


</script>  
